<script setup lang='ts'>
import { ref } from 'vue';

enum size {
    S = 's',
    M = 'm',
    L = 'L'
}
const isShow = ref(true)
const sizeData = ref<size>(size.S)
const changeSize = () => {
    if (sizeData.value === size.S) {
        sizeData.value = size.M
    } else if (sizeData.value === size.M) {
        sizeData.value = size.L
    } else {
        sizeData.value = size.S
    }
}
</script>

<template>
    <div>
        <h1>尺码表</h1>
        <img class="avator"
            src="http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
            v-show="isShow" alt="">
        <button @click="isShow = !isShow">是否显示</button>
        <p v-if="sizeData === size.S">小孩尺码</p>
        <p v-else-if="sizeData === size.M">大孩尺码</p>
        <p v-else="sizeData ===size.L">青年尺码</p>
        <button @click="changeSize">切换尺码</button>

    </div>

</template>

<style scoped>
.avator {
    height: 100px;
    width: 100px;
    border-radius: 50px;
}
</style>